<template>
  <div>

    <!-- 头部开始 -->
    <myheader/>
    <!-- 头部结束 -->

    <div class="udlite-container partners">
        <van-cell-group>
            
            <van-tabs v-model="active">
            
            <van-tab title="用户名登录">
            <van-field v-model="username" label='用户名' placeholder="请输入用户名"/>
            <van-field v-model="password" label='密码' placeholder="请输入密码"/>
            </van-tab>
            
            <van-tab title="手机号登录">
            <van-field v-model="phone" label='手机号' placeholder="请输入手机号"/>
            <van-field v-model="password" label='密码' placeholder="请输入密码"/>
            </van-tab>

            </van-tabs>


            <!-- 验证码 -->
            <van-cell-group>

                <drag-verify :width='width' :height='height' :text='text' ref='Verify'>
                
                </drag-verify>

            </van-cell-group>

            <van-cell-group>
                <img :src='src' @click="changecode" />
            </van-cell-group>

            <!-- 图片验证码 -->
            <van-field v-model="code" label='验证码' placeholder="请输入验证码"/>

            <van-button type='primary' @click="submit">登录</van-button>
            <van-button type='info'>重置</van-button>
            <a href='http://localhost:8000/ding_url'><img src='http://localhost:8000/static/dingding.png/'></a>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <!-- <a href='http://localhost:8000/gitee_url'><img src='http://localhost:8000/static/mayun.png/'></a> -->
        </van-cell-group>
    </div>

    <!-- 表单区域 -->
    
  </div>
</template>

<script>
import myheader from './myheader.vue'
import dragVerify from 'vue-drag-verify'
export default {

    data(){
        return{
            username:'',
            password:'',
            active:1,
            phone:null,
            width:320,
            height:42,
            text:'请您拖动滑块',
            code:'',
            src:'http://localhost:8000/mycode/',
        }
    },
    // 声明组件
    components:{
        'myheader':myheader,
        'dragVerify':dragVerify,
    },
    mounted:function(){
        
    },
    methods:{
        // 变更验证码,当通过url传参时,页面自动刷新
        changecode:function(){
            
            // 随机数
            var num=Math.ceil(Math.random()*10);

            this.src=this.src+'?num='+num;


        },
        submit:function(){
            
            if(this.$refs.Verify.isPassing==true){
                let parm=new FormData()
                parm.append('username',this.username)
                parm.append('password',this.password)
                parm.append('phone',this.phone)
                parm.append('code',this.code)
                this.axios.post('http://localhost:8000/login/',parm).then((response)=>{
                    if(response.data.code==200){
                        this.$toast('登录成功')
                        localStorage.setItem('username',response.data.username)
                        localStorage.setItem('token',response.data.token)
                        localStorage.setItem('uid',response.data.uid)
                        this.$router.push({path:'/'})
                    }else{
                        this.$toast(response.data.message)
                    }
                })
            }else{
                alert('请先拖动滑块')
                return 
            }
            

            
        },
        
    }
}
</script>

<style>

img{
    cursor:pointer
}

</style>